
<template>
    <div>
        <!-- 面包屑区域 -->
		<Alert v-if="!isquery" class="padding-15" show-icon>操作提示：带有”<span class="color-danger">*</span>“的选项为必填项，其他为选填项。</Alert>
        <!-- 面包屑区域 -->
        <compWrapper title="基本信息" theme="primary">
            <Form class="clearfix padding-right-15" ref="form" :model="formData" :label-width="100" :rules="rulevalid" v-if="!isquery">
                <Row>
				<Col span="12">
				<FormItem prop="contactName" label="收货人:">
					<Input  v-model="formData.contactName"/>
				</FormItem>
				</Col>
				<Col span="12">
				<FormItem prop="contactPhone" label="联系电话:">
					<Input  v-model="formData.contactPhone"/>
				</FormItem>
				</Col>
				<Col span="12">
				<FormItem prop="countrycode" label="国家:">
                    <Select v-model="formData.countrycode" clearable>
                        <Option v-for="(item,index) in getCountryList" :key="index" :value="item.value">{{item.label}}</Option>
                    </Select>
				</FormItem>
				</Col>
				<Col span="12">
				<FormItem prop="state" label="州:">
					<Input  v-model="formData.state"/>
				</FormItem>
				</Col>
				<Col span="12">
				<FormItem prop="city" label="城市:">
					<Input  v-model="formData.city"/>
				</FormItem>
				</Col>
				<Col span="12">
				<FormItem prop="zipcode" label="邮编:">
					<Input  v-model="formData.zipcode"/>
				</FormItem>
				</Col>
				<Col span="12">
				<FormItem prop="addressLine1" label="详细地址:">
					<Input  v-model="formData.addressLine1"/>
				</FormItem>
				</Col>
				<Col span="12">
				<FormItem label="备注:">
					<Input  v-model="formData.remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}"/>
				</FormItem>
				</Col>
				<Col span="24" class="text-right padding-bottom-20" v-if="!isquery">
					<Button type="primary" @click="submit">保存</Button>
					<Button class="margin-left-10" @click="cancel">返回</Button>
				</Col>
                </Row>
			</Form>
			<Form class="clearfix"  :label-width="100" v-else>
                <Row>
				<Col span="12">
				<FormItem label="收货人:">
					<span>{{formData.contactName}}</span>
				</FormItem>
				</Col>
				<Col span="12">
				<FormItem  label="联系电话:">
					<span>{{formData.contactPhone}}</span>
				</FormItem>
				</Col>
				<Col span="12">
				<FormItem  label="国家:">
					<span>{{formData.countrycode}}</span>
				</FormItem>
				</Col>
				<Col span="12">
				<FormItem label="州:">
					<span>{{formData.state}}</span>
				</FormItem>
				</Col>
				<Col span="12">
				<FormItem  label="城市:">
					<span>{{formData.city}}</span>
				</FormItem>
				</Col>
				<Col span="12">
				<FormItem  label="邮编:">
					<span>{{formData.zipcode}}</span>
				</FormItem>
				</Col>
				<Col span="12">
				<FormItem  label="详细地址:">
					<span>{{formData.addressLine1}}</span>
				</FormItem>
				</Col>
				<Col span="12">
				<FormItem label="备注:">
					<span>{{formData.remark}}</span>
				</FormItem>
				</Col>
                </Row>
			</Form>
		</compWrapper>
        <record :id="id" />
		<Spin size="large" fix v-if="loading"></Spin>
    </div>
</template>

<script>
import { HttpSaveReceiver, HttpReceiver } from '@/service/api/views';
import record from '@/views/record';
import {mapGetters,mapState} from 'vuex'

export default {
    props:['activeid','querytype'],
	components: {
		record,
	},
	data() {
		return {
			isquery: (this.$route.query.type||this.querytype) === 'query',
			id: this.$route.params.id || this.activeid,
			loading: false,
			formData: {
				contactName: '',
				countrycode: '',
				state: '',
				city: '',
				zipcode: '',
				addressLine1: '',
				contactPhone: '',
				remark: '',
			},
			rulevalid: {},
		};
	},
	created() {
		this.validate();
		this.getDetail();
	},
    computed:{
        ...mapGetters('dictionary', ['getCountryList']),
    },
	methods: {
		validate() {
			let rulevalid = this.rulevalid;
			Object.keys(this.formData).forEach(key => {
				rulevalid[key] = [
					{
						required: true,
						message: '该信息不能为空,请填写信息',
						trigger: 'blur',
					},
				];
			});
		},
		cancel() {
			setTimeout(() => {
				this.$router.push({ name: 'addressReceiver' });
			}, 1000);
		},
		async submit() {
			let valid = await this.$refs['form'].validate();
			if (!valid) return;
			this.loading = true;
			HttpSaveReceiver(this.formData).then(res => {
				this.cancel();
				this.$Message.success(res.message);
			}, err => {
				this.$Message.error(err.message);
			}).finally(result => {
				this.loading = false;
			})

		},
		async getDetail() {
			this.loading = true;
			HttpReceiver({ id: this.id }).then(res => {
				this.formData = { ...this.formData, ...res.data };
			}, err => {
				this.$Message.error(err.message);
			}).finally(result => {
				this.loading = false;
			})
		},
	},
};
</script>
